<html>
<head>
<title>增加奶茶</title>
<script src="../assets/jquery.min.js"></script>
<meta charset="utf-8">
</head>

<body>
	<form id="form">
		选择奶茶类别：<select name="category"> #for(x:category)
			<option>#(x.product_name)</option> #end
		</select><br><br>
		输入奶茶名称：<input type="text" name="cocoName" id="cocoName" required="required"><br>
		<br> 选择规格：
		<table>
			<tr>
				<td>大小</td>
				<td>&nbsp;</td>
				<td>价格</td>
			</tr>
			<tr>
				<td><input type="checkbox" value="big" id="bigCheck"
					onclick="check('big')">大</td>
				<td>&nbsp;</td>
				<td><input type="text" name="big" style="width: 60px;"
					id="big" disabled></td>
			</tr>
			<tr>
				<td><input type="checkbox" value="middle" id="middleCheck"
					onclick="check('middle')">中</td>
				<td>&nbsp;</td>
				<td><input type="text" name="middle" style="width: 60px;"
					id="middle" disabled></td>
			</tr>
			<tr>
				<td><input type="checkbox" value="small" id="smallCheck"
					onclick="check('small')">小</td>
				<td>&nbsp;</td>
				<td><input type="text" name="small" style="width: 60px;"
					id="small" disabled></td>
			</tr>

		</table>
		<input type="button" value="增加" id="add">
	</form>
	<script>
		;
		!function() {
			$('#add').on('click', function() {
				var formdata = $('#form').serialize();
				//alert(formdata);
				  formdata = decodeURIComponent(formdata,true);
				  
				  $.ajax({
			            url: 'product/addProduct',    //提交地址
			            type: 'post',   //提交方式
			            dataType:'json',
			            data: {"info":formdata},
			            success: function(data) {   //成功返回信息
			                window.alert(data.msg);
			            }
			        });
				
			});

		}();
	</script>

	<script type="text/javascript">
		function check(idValue) {
			if (idValue == "big") {
				if (bigCheck.checked) {
					document.getElementById('big').disabled = false;
				} else {
					document.getElementById('big').disabled = true;
				}
			} else if (idValue == "middle") {
				if (middleCheck.checked) {
					document.getElementById('middle').disabled = false;
				} else {
					document.getElementById('middle').disabled = true;
				}
			} else {
				if (smallCheck.checked) {
					document.getElementById('small').disabled = false;
				} else {
					document.getElementById('small').disabled = true;
				}
			}
		}
	</script>
</body>
</html>